<template>
        <!-- 当前表单的初始值 -->

    <!-- <input v-show="showInput" v-focus v-model="text"> -->

    // vue 通过给对象定义一个ref值, 来与变量进行绑定(ref="input"  ==> inputRef = ref('input'))
    <a-input 
    v-model="testData" 
    :style="{width:'320px'}" 
    placeholder="Please enter something" 
    allow-clear 
    @keyup.enter="{{ list.course.push(testData); testData = ''  }}" 
    />
    <div id="sync_test">
        <ul>
            // ["a", "b", "c"] 
            // item in list.course ==> item (a/b/c)
            <li v-for="(item, index) in list.course" :key="item">{{ item }}-{{ index }}</li>
        </ul>
        <!-- {{ list.course }} -->
    </div>
    <a-switch v-model="isbg" type="round"/>
    <a-input 
    v-model="testDataStype.width" 
    :style="{width:'320px'}" 
    placeholder="Please enter something" 
    allow-clear 
    />
    <div :id="testData" :style="testDataStype">
         <!-- testData1 -->
        {{ testData1 }}
    </div>
    <button  @click="copyText(testData)">复制文本</button>
</template>

<script setup>
import { 
    onMounted,
    nextTick,
    ref,
watch,
computed} from 'vue';

// const text = ref('初始值')
// const inputValue = ref('input')

const list = ref({
    current: '',
    course: [],
})

const isbg = ref(false)
const testDataStype = ref({
    height: '200px',
    width: '200px',
    // 遇到background-color转换为驼峰
    backgroundColor: 'red',
})
const copyText = (v) => {
    console.log(v)
    console.log("test copy")
}

const testData = ref('Test')
// testData1 转换成一个 getter setter
// testData1 
// testData1 = 'xxx'
const testData1 = computed({
    get() {
        return testData.value + '.test'
    }
})
// const testData1= () => {
//     return testData.value + '.test'
// }

// Watch 追踪: 如果追踪一个对象变化
// 理解为一个全局变量

watch(
    list, 
    (newValue, oldValue) => {
    console.log(newValue)
    console.log(oldValue)
}, { deep: true })

// const addToList = () => {
//     // 把响应式对象的值
//     list.value.current = testData.value
//     list.value.course.push(testData.value)
//     testData.value = ''    
// }

// $ref('xxx')  testData.value = 'xxxx'
// vue 编译器 处理 $ref()
// testData = 'xxxx'

    // ref="input"
    // 通过vue的引用获取一个组件
    // 引用被操作一个三分组件
    // const input = ref()

// const vFocus = {
//     mounted: (e) => {e.focus()}
// }

// const showInput = ref(true)

onMounted(() => {
    testData.value = '老喻'
    // 这里的innerText是什么? 因为这个是异步更新
    console.log(document.getElementById('sync_test').innerText) 

    // 等触发了下次更新后来执行你的代码
    nextTick(() => {
        console.log(document.getElementById('sync_test').innerText) 
    })

    // const input = document.getElementById('input')
    // console.log(input)
    // input.focus()
})





// 虚拟Dom已经生成好了, 等待被挂载
// onBeforeMount(() => {
//     console.log('onBeforeMount')
// })
// onMounted(() => {
//     // 虚拟Dom 已经挂载，被渲染成真实的dom, 用户可以看见了
//     // document.get(xx).xxx
//     console.log('onMounted')
// })

// // 界面被重新选择之前
// onBeforeUpdate(() => {
//     console.log('onBeforeUpdate')
// })
// // 界面从新被渲染之后
// onUpdated(() => {
//     console.log('onUpdated')
// })


// // 切换了页面组件被销毁
// onBeforeUnmount(() => {
//     console.log('onBeforeUnmount')
// })
// onUnmounted(() => {
//     console.log('onUnmounted')
// })
</script>

<style lang="css" scoped>
.bg {
    background-color: blueviolet;
}
</style>